<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="白小白">
		<script src="js/jquery.js"></script>
		<title>轮播图</title>
		<style type="text/css">
			.content{
				width: 600px;
				height: 1220px;
				margin: 0 auto;
				position: relative;
			}
			img{
				width: 100%;
				height: 100%;
			}
            .one{
                position: absolute;
                top: 0;
            }
            .two{
                position: absolute;
                top: 300px;
            }
            .three{
                position: absolute;
                top: 600px;
            }
            .pic{
                width: 100%;
                height: 225px;
            }
			.content .pic a{
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			.content .pic a.current{
				display: block;
			}
			
			.content .page{
				position: absolute;
				right: 20px;
			    top: 110px;
				color: white;
			}
			.content .page span{
				display: inline-block;
				width: 30px;
				height: 30px;
				background-color: rgba(100,100,100,0.6);
				text-align: center;
				line-height: 30px;
				cursor: pointer;
			}
			.content .page span:hover{
				background-color: rgba(100,100,100,0.8);
			}
		</style>
	</head>
	<body>
		
		<div class="content">
			<div class="pic one">
				<a class="current" href="#"><img src="img/1.jpg"  /></a>
				<a href="#"><img src="img/2.jpg"  /></a>
				<a href="#"><img src="img/3.jpg"  /></a>
				<a href="#"><img src="img/1.jpg"  /></a>
				<a href="#"><img src="img/0.jpg"  /></a>
			</div>
			<div class="pic two">
				<a class="current" href="#"><img src="img/1.jpg"  /></a>
				<a href="#"><img src="img/2.jpg"  /></a>
				<a href="#"><img src="img/3.jpg"  /></a>
				<a href="#"><img src="img/1.jpg"  /></a>
				<a href="#"><img src="img/0.jpg"  /></a>
            </div>
            <div class="pic three">
				<a class="current" href="#"><img src="img/1.jpg"  /></a>
				<a href="#"><img src="img/2.jpg"  /></a>
				<a href="#"><img src="img/3.jpg"  /></a>
				<a href="#"><img src="img/1.jpg"  /></a>
				<a href="#"><img src="img/0.jpg"  /></a>
			</div>
			<div class="page">
				<span class="prev">&lt;</span>
				<span class="next">&gt;</span>
			</div>
		</div>
		<script type="text/javascript">
			
			$(function(){
				
				//记录图片的索引，初始是第一张
				var index = 0
				
				//自动播放图片
				var timer = setInterval(nextImg,1000)
				
				//下一张图片
				function nextImg(){
					
                    index = index == $(".content .one a").length - 1 ? 0 : index + 1;
                    
					console.log(index)
					showImg()
				}
				
				//上一张图片
				function prevImg(){
//						console.log(22)
					index = index == 0 ? $(".content .one a").length-1 : index - 1;
					showImg()
				}
				
				function showImg(){
					$(".content .one a")
					.eq(index).show()
                    .siblings().hide();
                    $(".content .two a")
					.eq(index).show()
                    .siblings().hide();
                    $(".content .three a")
					.eq(index).show()
                    .siblings().hide();
				}
				
				
				//手动切换图片
				$(".content .indicator span").hover(function(){
					
					clearInterval(timer)
					
					index = $(this).index()
					showImg()
					
				},function(){
					timer = setInterval(nextImg,1000)
				})
				
				
				//点击切换上一张/下一张
				$(".content .page span").hover(function(){
					clearInterval(timer)
					
				},function(){
					timer = setInterval(nextImg,1000)
				})
				
				//上一张
				$(".content .page .prev").click(function(){
					prevImg()
				})
				
				//下一张
				$(".content .page .next").click(function(){
					nextImg()
				})
			})
			
			
		</script>
	</body>
</html>
